<template>
	<view class="keyword">
		<view class="title">热门搜索</view>
		<view class="tag-list">
			<view v-for="(item, index) in hotList" :key="index" @click="clickTagHandler(item)">
				{{item}}
			</view>
		</view>
		<view class="title space-between">
			<text>历史搜索</text>
			<text @click="clearHistory">清空</text>
		</view>
		<view class="tag-list">
			<view v-for="(item, index) in historyList" :key="index" @click="clickTagHandler(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>


<script>
	// 历史本地存在 key
	const key = 'history_list'
	export default {

		data() {
			return {
				//热门搜索
				hotList: ['Java', 'SpringBoot', 'SpringCloud', 'Python', 'Vue', 'React'],
				historyList: uni.getStorageSync(key) // ['Vue', 'Java'], //历史搜索
			}
		},

		methods: {
			// 清空历史
			clearHistory() {
				this.historyList = []
				uni.removeStorageSync(key);
			},

			// 点击搜索标签
			clickTagHandler(content) {
				// #ifdef APP-PLUS

				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.setTitleNViewSearchInputText(content);
				// #endif
				// #ifdef H5
				var placeholder = document.querySelector('.uni-page-head-searchplaceholder')
				placeholder = ''
				var inputSearch = document.querySelector('.uni-inputinput[type=search]');
				inputSearch = content;
				// #endif

				// 开始搜索
				this.$emit('doSearch', {
					value: content
				})
			},
		}
	}
</script>

<style lang="scss">
	.keyword {
		padding: 25rpx;

		.title {
			font-size: 30rpx;
			color: #222222;

			text:last-child {
				color: #999;
			}
		}

		.tag-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			margin-bottom: 60rpx;

			view {
				font-size: 25rpx;
				color: #999;
				border: 1rpx solid #999;
				border-radius: 8rpx;
				padding: 6rpx 15rpx;
				margin: 10rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
